<template>
  <div>
    <card
      class="flex rela"
      :width="1400"
      height="calc(100vh - 68px - 18px - 30px)"
    >
      <div class="content" v-loading="loading">
        <div class="content_header">
          <span>请选择授课班级</span>
          <div>
            <el-button
              v-if="$store.getters.roleId == 'teacher'"
              style="margin-right: 8px"
              type="primary"
              @click="showHistoryTeaching"
            >选择历史排课
            </el-button
            >
            <el-select
              v-model="params.schoolSemesterId"
              placeholder="请选择学期"
              @change="changeSchoolSemester"
            >
              <el-option
                v-for="item in schoolSemesterList"
                :key="item.semesterId"
                :label="item.semesterName"
                :value="item.semesterId"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div
          class="empty"
          v-if="
            courseSchedulingList.length == 0 &&
            courseSchedulingNoList.length == 0
          "
        >
          <div class="empty_text">
            <img
              src="@/assets/images/group_icon/course_icon.png"
              alt="加载失败"
            />
            暂无课程
          </div>
          <div class="empty_img">
            <img
              src="@/assets/images/group_icon/course_empty_icon.png"
              alt="加载失败"
            />
            <div class="text" v-if="$store.getters.roleId != 'assistant'">
              请先前往 <span @click="routeTurn">课程</span> 页，创建课程
            </div>
            <div class="text" v-else>暂无排课</div>
          </div>
        </div>
        <div
          class="content_body"
          v-if="
            courseSchedulingNoList.length > 0 || courseSchedulingList.length > 0
          "
        >
          <transition-group name="list" tag="div">
            <div
              class="total_item"
              v-for="(item) in courseSchedulingNoList"
              :key="item.courseId"
            >
              <div class="course_name">
                <img
                  class="course_icon"
                  src="@/assets/images/group_icon/course_icon.png"
                  alt="加载失败"
                />《{{ item.courseName }}》
              </div>
              <div class="scheduling_total_item">
                <div
                  @click="
                    routeTo(
                      schedulingItem,
                      item.courseName,
                      item.includeGroupExam,
                      item.includeSelectTask,
                      item.courseType
                    )
                  "
                  class="scheduling_item rela"
                  v-for="schedulingItem in item.schedulingList"
                  :key="schedulingItem.id"
                >
                  <!--
                    " -->
                  <div
                    v-if="
                      schedulingItem.configurationFlag == 1 &&
                      schedulingItem.finishStatus != 1 &&
                      $store.getters.curRole == 'teacher'
                    "
                    class="scheduling_item_add_mask"
                    @click.stop="showDialog(item, schedulingItem, 2)"
                  >
                    <div>
                      课程新增配分项，请先点击“
                      <span style="text-decoration: underline" class="shou"
                      >编辑</span
                      >
                      ”进行配置
                    </div>
                  </div>

                  <div v-if="schedulingItem.msgNum > 0" class="msg_sign">
                    {{
                      schedulingItem.msgNum < 100
                        ? schedulingItem.msgNum
                        : '99+'
                    }}
                  </div>

                  <img
                    v-if="schedulingItem.finishStatus == 1"
                    class="finished_icon"
                    src="@/assets/images/finished_icon.png"
                    alt="加载失败"
                  />
                  <div class="class_name">
                    <img
                      class="class_icon"
                      src="@/assets/images/group_icon/class_icon.png"
                      alt="加载失败"
                    />
                    <div class="w_140">
                      <tooltip
                        :text="schedulingItem.schedulingName"
                        width="100%"
                      ></tooltip>
                    </div>
                  </div>
                  <div class="student_count">
                    <img
                      class="all_person_icon"
                      src="@/assets/images/group_icon/all_person_icon.png"
                      alt="加载失败"
                    />
                    整班 <span>{{ schedulingItem.studentCount }}</span> 人
                  </div>
                  <div class="student_count">
                    <img
                      class="all_person_icon"
                      src="@/assets/images/group_icon/progress_icon.png"
                      alt="加载失败"
                    />
                    整班进度
                    <span>{{
                        schedulingItem.learningProgress
                          ? schedulingItem.learningProgress.toFixed(2)
                          : 0
                      }}</span>
                    %
                  </div>
                  <div
                    class="absolute"
                    v-if="
                      schedulingItem.finishStatus != 1 &&
                      $store.getters.curRole == 'teacher'
                    "
                  >
                    <i
                      @click.stop="showDialog(item, schedulingItem, 2)"
                      class="el-icon-edit"
                    ></i>
                    <i
                      style="margin-left: 10px"
                      @click.stop="delCourse(schedulingItem, item.courseName)"
                      class="el-icon-delete-solid"
                    ></i>
                  </div>
                </div>
                <div
                  v-if="$store.getters.roleId == 'teacher'"
                  @click="showDialog(item, schedulingItem, 1)"
                  class="scheduling_item_add"
                >
                  <i class="el-icon-plus"></i>
                  <div class="text">添加授课班级</div>
                </div>
              </div>
            </div>
          </transition-group>
          <transition-group name="list" tag="div">
            <div
              class="total_item"
              v-for="(item, index) in courseSchedulingList"
              :key="item.courseId"
            >
              <div class="course_name">
                <img
                  class="course_icon"
                  src="@/assets/images/group_icon/course_icon.png"
                  alt="加载失败"
                />《{{ item.courseName }}》
                <img
                  @click="turnUp(index)"
                  v-if="index > 0 && item.operableFlag == 1"
                  class="up_icon"
                  src="@/assets/images/group_icon/up_icon.png"
                  alt="加载失败"
                />
                <img
                  @click="turnDown(index)"
                  v-if="
                    index < courseSchedulingList.length - 1 &&
                    item.operableFlag == 1
                  "
                  class="down_up"
                  src="@/assets/images/group_icon/down_up.png"
                  alt="加载失败"
                />
              </div>
              <div class="scheduling_total_item">
                <div
                  @click="
                    routeTo(
                      schedulingItem,
                      item.courseName,
                      item.includeGroupExam,
                      item.includeSelectTask,
                      item.courseType
                    )
                  "
                  class="scheduling_item rela"
                  v-for="schedulingItem in item.schedulingList"
                  :key="schedulingItem.id"
                >
                  <!--
                    " -->
                  <div
                    v-if="
                      schedulingItem.configurationFlag == 1 &&
                      schedulingItem.finishStatus != 1 &&
                      $store.getters.curRole == 'teacher'
                    "
                    class="scheduling_item_add_mask"
                    @click.stop="showDialog(item, schedulingItem, 2)"
                  >
                    <div>
                      课程新增配分项，请先点击“
                      <span style="text-decoration: underline" class="shou"
                      >编辑</span
                      >
                      ”进行配置
                    </div>
                  </div>

                  <div v-if="schedulingItem.msgNum > 0" class="msg_sign">
                    {{
                      schedulingItem.msgNum < 100
                        ? schedulingItem.msgNum
                        : '99+'
                    }}
                  </div>

                  <img
                    v-if="schedulingItem.finishStatus == 1"
                    class="finished_icon"
                    src="@/assets/images/finished_icon.png"
                    alt="加载失败"
                  />
                  <div class="class_name">
                    <img
                      class="class_icon"
                      src="@/assets/images/group_icon/class_icon.png"
                      alt="加载失败"
                    />
                    <div class="w_140">
                      <tooltip
                        :text="schedulingItem.schedulingName"
                        width="100%"
                      ></tooltip>
                    </div>
                  </div>
                  <div class="student_count">
                    <img
                      class="all_person_icon"
                      src="@/assets/images/group_icon/all_person_icon.png"
                      alt="加载失败"
                    />
                    整班 <span>{{ schedulingItem.studentCount }}</span> 人
                  </div>
                  <div class="student_count">
                    <img
                      class="all_person_icon"
                      src="@/assets/images/group_icon/progress_icon.png"
                      alt="加载失败"
                    />
                    整班进度
                    <span>{{
                        schedulingItem.learningProgress
                          ? schedulingItem.learningProgress.toFixed(2)
                          : 0
                      }}</span>
                    %
                  </div>
                  <div
                    class="absolute"
                    v-if="
                      schedulingItem.finishStatus != 1 &&
                      $store.getters.curRole == 'teacher'
                    "
                  >
                    <i
                      @click.stop="showDialog(item, schedulingItem, 2)"
                      class="el-icon-edit"
                    ></i>
                    <i
                      style="margin-left: 10px"
                      @click.stop="delCourse(schedulingItem, item.courseName)"
                      class="el-icon-delete-solid"
                    ></i>
                  </div>
                </div>
                <div
                  v-if="$store.getters.roleId == 'teacher'"
                  @click="showDialog(item, schedulingItem, 1)"
                  class="scheduling_item_add"
                >
                  <i class="el-icon-plus"></i>
                  <div class="text">添加授课班级</div>
                </div>
              </div>
            </div>
          </transition-group>
        </div>
      </div>
    </card>
    <!--  添加|修改  授课班级弹窗  -->
    <addTeachingDialog
      :openType="teachingOpenType"
      :dialog-visible.sync="dialogVisible"
      :courseInfo="courseInfo"
      :teachingDetial="addTeachingDialog_form"
      :classTeachingId="addTeachingDialog_classTeachingId"
      @refresh="getCourseScheduling"
    ></addTeachingDialog>
    <!-- 添加历史排课 -->
    <historyTeachingDrawer
      port="teacher"
      @refresh="getCourseScheduling"
      :show.sync="showHistory"
      :semesterName="semesterName"
      :schoolSemesterId="params.schoolSemesterId"
    ></historyTeachingDrawer>
  </div>
</template>

<script>
import {
  getCourseSchedulingInfo,
  getCourseSchedulingList,
  getSchoolSemesterList,
  saveCourseSort,
  deleteCourseScheduling
} from '@/api/teach/teach'

import addTeachingDialog from './compontents/addTeachingDialog'
import historyTeachingDrawer from './compontents/historyTeachingDrawer'

export default {
  name: 'teachIndex',
  components: {
    addTeachingDialog,
    historyTeachingDrawer
  },
  data() {
    return {
      schedulingItem: {},
      addTeachingDialog_form: {},
      teachingOpenType: '',
      addTeachingDialog_classTeachingId: '',
      courseInfo: {
        courseId: '',
        courseName: '',
        courseType: ''
      },
      loading: true,
      dialogVisible: false,

      showHistory: false,
      semesterName: '',
      params: {
        //学期id
        schoolSemesterId: ''
      },
      //教学列表
      courseSchedulingList: [],
      courseSchedulingNoList: [],
      //学期列表
      schoolSemesterList: []
    }
  },
  watch: {},
  created() {
    let courseinfo = localStorage.getItem('COURSE_INFO')
    if (courseinfo) {
      this.$router.replace({ path: '/index' })
    } else {
      this.getSchoolSemester()
    }
  },
  mounted() {
  },
  methods: {
    // 1是新增 2是编辑
    async showDialog(item, schedulingItem, teachingOpenType) {
      console.log(item)
      if (teachingOpenType == 2) {
        this.addTeachingDialog_classTeachingId =
          schedulingItem.courseSchedulingId
        try {
          let res = await getCourseSchedulingInfo(
            schedulingItem.courseSchedulingId
          )
          const { code, data } = res
          if (code == 200) {
            this.addTeachingDialog_form = data
          }
        } catch (e) {
          console.error(e)
        }
      }
      this.courseInfo = {
        courseId: item.courseId,
        courseName: item.courseName,
        courseType: item.courseType,
        branchId: this.$store.getters.branchId,
        semesterId: this.params.schoolSemesterId
      }
      this.teachingOpenType = teachingOpenType
      this.dialogVisible = true
    },

    showHistoryTeaching() {
      for (const item of this.schoolSemesterList) {
        if (item.semesterId == this.params.schoolSemesterId) {
          this.semesterName = item.semesterName
        }
      }
      this.showHistory = true
    },
    turnUp(index) {
      if (index > 0) {
        const temp = this.courseSchedulingList[index]
        this.courseSchedulingList.splice(index, 1)
        this.courseSchedulingList.splice(index - 1, 0, temp)
        let ids = []
        for (const courseSchedulingListElement of this.courseSchedulingList) {
          ids.push(courseSchedulingListElement.courseId)
        }
        this.saveCourseSort(ids.join(','))
      }
    },
    turnDown(index) {
      if (index < this.courseSchedulingList.length - 1) {
        const temp = this.courseSchedulingList[index]
        this.courseSchedulingList.splice(index, 1)
        this.courseSchedulingList.splice(index + 1, 0, temp)
        let ids = []
        for (const courseSchedulingListElement of this.courseSchedulingList) {
          ids.push(courseSchedulingListElement.courseId)
        }
        this.saveCourseSort(ids.join(','))
      }
    },
    async saveCourseSort(ids) {
      let res = await saveCourseSort(this.$store.getters.teacherId, ids)
      if (res.code == 200) {
        this.$modal.msgSuccess('已保存当前排序')
      }
    },
    routeTurn() {
      this.$router.push({ path: '/course' })
    },
    routeTo(item, courseName, includeGroupExam, includeSelectTask, courseType) {
      item.courseName = courseName
      item.includeGroupExam = includeGroupExam
      item.includeSelectTask = includeSelectTask
      item.courseType = courseType
      localStorage.setItem('COURSE_INFO', JSON.stringify(item))
      this.$router.push({ path: '/index', query: { courseId: item.courseId } })
    },
    delCourse(schedulingItem, courseName) {
      let text
      if (!schedulingItem.learningProgress) {
        text = `目前学生进度均为0%或未开始，确认将《${schedulingItem.schedulingName}》从《${courseName}》中移除吗?`
        this.$confirm(text, '移除班级确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            let res = await deleteCourseScheduling(
              schedulingItem.courseSchedulingId,
              { semesterId: this.params.schoolSemesterId }
            )
            const { code } = res
            if (code == 200) {
              this.$modal.msgSuccess('移除成功')
              this.getCourseScheduling()
            }
          })
          .catch(() => {
            this.$modal.msgInfo('已取消移除')
          })
      } else {
        text = `《${schedulingItem.schedulingName}》内有学生正在学习《${courseName}》，无法移除。请先选择《${schedulingItem.schedulingName}》，结束所有学生的学习状态。`
        this.$alert(text, '移除班级确认', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
        })
      }
    },

    changeSchoolSemester() {
      //存储当前的学期
      this.$store.dispatch('SetSchoolSemester', this.params.schoolSemesterId)
      this.getCourseScheduling()
    },
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
        let cacheSemester = this.$store.getters.cacheSemester
        if (cacheSemester) {
          this.params.schoolSemesterId = cacheSemester
        } else {
          this.params.schoolSemesterId =
            this.$store.getters.schoolInfo.semesterId
        }
        this.getCourseScheduling()
      }
    },
    // 获取教学列表
    async getCourseScheduling() {
      this.loading = true
      let res = await getCourseSchedulingList(this.params.schoolSemesterId)
      const { code, data } = res
      if (code == 200) {
        this.loading = false
        this.courseSchedulingNoList = data.filter(
          (item) => item.operableFlag == 0
        )
        this.courseSchedulingList = data.filter(
          (item) => item.operableFlag == 1
        )
      }
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;

  .empty {
    width: 100%;

    .empty_text {
      margin-top: 20px;
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 25px;

      img {
        user-select: none;
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
    }

    .empty_img {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 180px;
      box-sizing: border-box;

      img {
        width: 113px;
        height: 97px;
      }

      .text {
        margin-top: 22px;
        user-select: none;
        font-size: 18px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        color: #666666;
        line-height: 25px;

        span {
          cursor: pointer;
          user-select: none;
          color: #28b28b;
        }
      }
    }
  }

  .content_header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: 18px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      line-height: 25px;
    }
  }

  .content_body {
    margin-top: 20px;
    width: 100%;
    height: calc(100vh - 230px);
    overflow: auto;

    .total_item {
      margin-bottom: 20px;

      .course_name {
        font-size: 18px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        color: #333333;
        line-height: 25px;
        display: flex;
        align-items: center;

        .course_icon {
          user-select: none;
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }

        .up_icon {
          user-select: none;
          cursor: pointer;
          width: 20px;
          height: 20px;
          margin-left: 16px;
        }

        .down_up {
          user-select: none;
          cursor: pointer;
          width: 20px;
          height: 20px;
          margin-left: 16px;
        }
      }

      .scheduling_total_item {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .scheduling_item {
        width: 256px;
        height: 120px;
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #ebebeb;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;
        position: relative;
        margin: 0 0 10px 16px;
        cursor: pointer;
        user-select: none;

        .finished_icon {
          position: absolute;
          width: 80px;
          height: auto;
          right: 0;
          bottom: 0;
        }

        .msg_sign {
          position: absolute;
          width: 20px;
          height: 20px;
          background: #ff3b30;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: white;
          top: -5px;
          left: -5px;
        }

        .absolute {
          display: none;
          position: absolute;
          top: 10px;
          right: 10px;
          align-items: center;

          .el-icon-delete-solid {
            margin-left: 6px;
            font-size: 16px;
            color: #e95756;
            cursor: pointer;
          }

          .el-icon-edit {
            font-size: 16px;
            color: #11a983;
            cursor: pointer;
          }
        }

        .class_name {
          font-size: 16px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          color: #333333;
          line-height: 18px;
          display: flex;
          align-items: center;

          .class_icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
          }
        }

        .student_count {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          color: #99a1b3;
          line-height: 22px;
          margin-top: 10px;
          display: flex;
          align-items: center;

          .all_person_icon {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }

          span {
            font-size: 16px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 600;
            color: #333333;
            margin: 0 4px;
          }
        }
      }

      .scheduling_item:hover {
        border: 0;
        box-shadow: 0 0 20px 0 rgba(0, 55, 50, 0.12);

        .absolute {
          display: flex;
        }
      }

      .scheduling_item_add_mask {
        display: flex;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        width: 256px;
        height: 120px;
        font-size: 14px;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        border-radius: 12px;
      }

      .scheduling_item_add {
        width: 256px;
        height: 120px;
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #ebebeb;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 0 10px 16px;
        cursor: pointer;
        user-select: none;

        .el-icon-plus {
          width: 18px;
          height: 18px;
          color: #999999;
        }

        .text {
          margin-top: 10px;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
        }
      }

      .scheduling_item_add:hover {
        border: 0;
        box-shadow: 0 0 20px 0 rgba(0, 55, 50, 0.12);
      }
    }


  }
}

.course_create_type {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .type_left {
    cursor: pointer;
    user-select: none;
    width: 46%;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .img {
      width: 200px;
      height: 200px;
      border: 1px solid #d7d7d7;
    }

    .text {
      margin-top: 10px;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
  }
}

.dialog_footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.date_picker {
  width: 140px;
}

.list-move {
  transition: transform 0.5s;
}

.search_empty {
  font-size: 14px;
  font-weight: 500;
  color: #c0c4cc;
  padding: 14px 20px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.w_140 {
  width: 160px;
}
</style>
